<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p54_理解组件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 
			非单文件组件:
				一个文件中包含有n个组件。
			单文件组件:
				一个文件中只包含有1个组件。
		 -->
		 <!-- 
			Vue中使用组件的三大步骤:
				一、定义组件(创建组件
				二、注册组件√
				三、使用组件(写组件标签)
			
			一、如何定义一个组件?
				使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别;
				区别如下:
					1.el不要写，为什么?一最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
					2.data必须写成函数，为什么?一避免组件被复用时，数据存在引用关系。
					备注:使用template可以配置组件结构。
				
			二、如何注册组件?
				1.局部注册:靠new Vue的时候传入components选项
				2.全局注册:靠Vue.component('组件名',组件)
				
			三、编写组件标签:
				<school></school>
			
		 -->
	</head>
	<body>
		<div id="root">
		
		<!-- 第三步:编写组件标签 -->
			<school></school>
			<hr />
			<student></student>
		</div>
		<div id="root2">
			<hello></hello>
		</div>
		<script type="text/javascript">
			
			const school = Vue.extend({
				//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
				//el:"#root", 
				
				//template不能作为根元素使用，必须包含一个<div>
				template:` 
					<div>
						<h1>学校：{{schollName}}</h1>
						<h1>地址:{{address}}</h1>
						<button @click="showName">点我显示学校名</button>
					</div>
				`,
				data(){
					return {
						schollName:"尚硅谷",
						address:"和平谷",
					}
				},
				methods:{
					showName(){
						alert(this.schollName)
					}
				}
			})
			
			const student = Vue.extend({
				template:`
					<div>
						<h1>姓名：{{name}}</h1>
						<h1>age:{{age}}</h1>
					</div>
				`,
				data(){
					return {
						name:"宋飞",
						age:15
					}
				}
			})
			
			const hello =  Vue.extend({
				template:`
					<div>
						<h1>你好</h1>
					</div>
				`,
			})
			
			//第二步:全局注册组件，所有的vm都可以使用这个组件
			Vue.component('hello',hello)
			
			const vm = new Vue({
				el:"#root",
				//注册组件
				components:{
					//前面一个school是组件名（方便后面使用），后面一个school是上面定义那个（那不是组件名，就是一个变量）；
					//如果两者名字相同，可以简写一个school；
					school: school,
					student:student
				}
			})
			
			const vm1 = new Vue({
				el:"#root2"
			})
			
			/* 
				let data1 = {
					a:1,
					b:2
				}
				
				function data(){
					return {a:1,b:2}
				}
				
				const x1 = data1
				//这样写，每次改变x2 data中的a，x1中啊a也跟着改变；
				//将data写成函数形式可以避免这种情况；这就是组件中data必须写成函数形式的原因；
				const x2 = data1 
				
				const x3 = data()
				const x4 = data()
			 */
		</script>
	</body>
</html>